<template>
  <div :class="['scrollTop']" class="header-container">
    <div class="main">
      <div class="logo" @click="router.push('/')">
        <img :src="logo" alt="加载失败" />
      </div>
      <div class="menu">
        <div v-for="(item, index) in menuList" :key="index" :class="{ active: path === item.path }" class="menu-item"
          @click="handleRouter(item.path)">
          {{ item.name }}
        </div>
      </div>
      <div :class="[isScrollTop ? '' : 'border']" class="relation" @click="handleRouter('bottom')">
        联系我
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, watch } from "vue";
import { getAssetsFile } from "@/utils/util";

const props = defineProps({
  isScrollTop: {
    type: Boolean,
    default: false,
  },
});
const menuList = [
  { name: "首页", path: "/" },
  { name: "关于我", path: "/about" },
  { name: "全部资源", path: "/resource" },
  { name: "听音乐", path: "/music" },
  { name: "AI Chat", path: "/chat" },
];
const logo = getAssetsFile("images/logo.png");
const router = useRouter();
const isResource = ref(false);
const isAboutPath = ref(false)
let path = ref();

interface RouteBackground {
  background: string;
  isResourcePath: boolean;
}

const routeBackgrounds: Record<string, RouteBackground> = {
  "/resource": {
    background: `linear-gradient(left, rgb(255, 254, 253, .502) 0%, rgb(249, 212, 215, .502) 32%, rgb(208, 231, 252, .502) 100%)`,
    isResourcePath: true,
  },
  "/chat": {
    background: `url(${getAssetsFile("images/flex-bg.png")})`,
    isResourcePath: true,
  },
  "/music": {
    background: `url(${getAssetsFile("images/flex-bg.png")})`,
    isResourcePath: false,
  },
  default: {
    background: "white",
    isResourcePath: false,
  },
};

watch(
  () => router.currentRoute.value.path,
  (toPath: string) => {
    // 获取新路由路径对应的背景样式和资源路径标识
    const { background, isResourcePath } =
      routeBackgrounds[toPath] || routeBackgrounds.default;
    // 更新当前路径值
    path.value = toPath;
    // 获取主容器元素
    const mainContainer = document.getElementById("main-container");
    if (mainContainer) {
      // 设置主容器背景样式
      mainContainer.style.background = background;
      // 更新资源路径标识
      isResource.value = isResourcePath;
      // 将主容器滚动位置置顶
      mainContainer.scrollTop = 0;
      isAboutPath.value = path.value === "/about";
    }
  },
  { immediate: true, deep: true }, // 配置选项，立即执行且深度监听
);
const scrollToBottom = () => {
  const mainContainer = document.getElementById("main-container");
  if (mainContainer) {
    mainContainer.scrollTop = mainContainer.scrollHeight;
  }
};
const handleRouter = (path: string) => {
  switch (path) {
    case "bottom":
      if (router.currentRoute.value.path === "/") {
        scrollToBottom();
      } else {
        router.push("/about");
      }
      break;
    default:
      router.push(path);
  }
};
</script>

<style lang="scss" scoped>
.about {
  background: #111213;
}

.scrollTop {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  box-shadow: 0px 115px 500px rgba(0, 0, 0, 0.3);
  height: 0 !important;
  overflow: hidden;
}

.header-container {
  height: 68px;
  width: 100%;
  font-size: 14px;
  color: #4e4b60;
  letter-spacing: 2px;
  position: fixed;
  top: 0;
  font-weight: 600;
  z-index: 1000;
  transition: all 0.2s;
  font-family: "Microsoft YaHei", Arial, sans-serif;

  .active {
    color: #f77ade;
  }

  .main {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
      height: 100%;
      display: flex;
      align-items: center;

      img {
        height: 30px;
        cursor: pointer;
      }
    }

    .menu {
      display: flex;
      flex-direction: row;
      gap: 50px;
      margin: 0 150px;

      .menu-item {
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #f77ade;
        }
      }
    }

    .border {
      border: 2px solid #5e3dca !important;
    }

    .relation {
      cursor: pointer;
      border-radius: 30px;
      padding: 10px 28px;
      transition: all 0.3s;
      letter-spacing: 5px;
      border: 2px solid;

      &:hover {
        background-color: #4e4b60;
        color: #fff;
        border-color: initial !important;
      }
    }
  }
}
</style>
